<template>
<div class="index">
  <div class="path w">
    <div class="path-main">
			<span v-if="isLogin">您好{{userName}}</span>
      <span v-else class="hover" @click="goToLogin">登录</span><span>|</span><span class="hover" @click="goToMe">修改个人资料</span>
			<span v-if="hasOrg">|</span><span class="hover"  @click="goToMango" v-if="hasOrg">机构管理</span>
			<span>|</span><span class="hover" @click="goToOutLogin">退出登录</span>
    </div>
  </div>
  <div class="pic-ad w" v-if="barImg">
    <img :src="barImg"/>
  </div>
	<div class="w path-box">
		<div class="w creat-path">    
			<el-steps :active="pathAction+1" finish-status="success" align-center>
				<el-step title="登录、注册"></el-step>
				<el-step title="填写预登记信息"></el-step>
				<el-step title="填写调查问卷"></el-step>
				<el-step title="完成预登记"></el-step>
			</el-steps> 
		</div>
		<pathTwo v-model="pathAction" v-if="pathAction == 1"></pathTwo> 
		<pathThree v-model="pathAction" v-if="pathAction == 2"></pathThree> 
		<pathFour v-model="pathAction" v-if="pathAction == 3"></pathFour>
	</div>
</div>
</template>
<script>
import config from "@/config";
import pathTwo from "./components/path-two";
import pathThree from "./components/path-three";
import pathFour from "./components/path-four";

export default {
	components: {pathTwo,pathThree,pathFour },
  data() {
		return {
			isLogin:config.isLogin,
			pathAction:this.$route.query.tab ? parseInt(this.$route.query.tab) : 1,
			barImg:'',
			userName:'',
			hasOrg:false,
		}
	},
	mounted() {
		this.userName = config.userInfo && config.userInfo.customer ? config.userInfo.customer.customerName : '';
		this.id = this.$route.query.id ? this.$route.query.id : '';	
		this.hasOrg = config.baseInfo.customerInfoDTO.hasOrg;
		this.getDetail();
	},
	methods: {
		async getDetail(){
			var map = {
				token : config.userInfo.token,
				sessionId : config.userInfo.sessionId,
				customerUuid : config.userInfo.customer.uuid,
				exhibitionUuid :this.id,			
			};
			var param = config.setFormData('getExhibitionDetail',map)
			var res = await this.$http.post(config.appCall,param);
			if(res.data && res.data.return_code == '0'){
				this.barImg = 'https://reg.reed-sinopharm.com/'+res.data.infoDto.planeFigure;
			}		
		},
		goToOutLogin(){
			localStorage.userInfo = '';
			localStorage.baseInfo = '';
			config.userInfo = '';
			config.baseInfo = '';
			this.$router.push({path: '/login?id='+this.id})	
		},
		goToMango(){
			this.$router.push({path: '/list?id='+this.id})	
		},
		goToLogin(){
			this.$router.push({path: '/login?id='+this.id})	
		},
		goToMe(){
			this.pathAction = 1;
			this.$router.replace({path: 'index', query: {'id': this.id,'tab':1}});			
		},
	}
}
</script>
<style scoped>
.index{}

.path{ display:flex; font-size:14px; color:#333;}
.path .left{ width:200px; text-align:left;height:40px; line-height:40px; }
.path-main{ flex:1; display:flex; justify-content:flex-end;}
.path-main span{height:40px; line-height:40px; margin-right:8px; cursor:pointer;}
.path-main .hover:hover{ text-decoration:underline;}
.path-ad{ background-image: linear-gradient(to right, #DF9E7E, #ECB08C)}
.header{ height:95px; overflow:hidden;}
.header .logo{ float:left;}

.index-head-box{width:546px;position:relative; height:140px; float:right;}
.index-ser-tab{  font-size:14px; padding-top:10px;}
.index-ser-tab span{ float:left; margin-right:15px; height:28px; line-height:25px; cursor:pointer;}
.index-ser-tab span.cur{ color:#E1251B;}

.index-search{ width:546px;  display:flex; height:32px; border:2px solid #E1251B;  top:25px; left:70px;}
.index-ser-wrap{  width:488px;  background:#fff;}
.index-ser-wrap input{ float:left; border:0; outline:none;  font-size:12px; width:380px; height:24px; margin:4px 16px 0;}
.index-ser-wrap img{ float:right; margin:9px 17px 0 0; cursor:pointer;}
.index-ser-btn{ flex:1; background:#E1251B url(../assets/icon-05.png) no-repeat center center; cursor:pointer;}
.index-ser-btn:hover{ background-color:#C81623}
.index-hots{ font-size:14px; padding-top:5px;}
.index-hots a{ margin-right:10px; color:#666;}

.nav{ height:80px; line-height:80px; text-align:right;}
.nav a{ margin-left:105px; font-weight:bold;color:#666; text-decoration:none;}
.nav a:hover{ text-decoration:underline;}
.creat-path{ padding-top:50px;}
.pic-ad{ margin-bottom:15px;}
.pic-ad img{ width:1100px; border-radius:5px;}

.path-box{box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%); background:#fff; padding-bottom:80px; margin-bottom:60px;}

.footer{display:flex; justify-content:space-between; padding-bottom:30px;  margin-top:80px;}
.link{ flex:1; display:flex;}
.link-li{ width:25%;}
.link-li p{ font-weight:bold; margin:0; padding-bottom:13px;}
.link-li a{ display:block; line-height:1.8; font-size:14px; color:#333; text-decoration:none;}
.link-li a:hover{ text-decoration:underline;}
.aobut{ width:300px; margin-left:80px;  background:url(../assets/about.jpg) no-repeat  0 50px;}
.aobut p{ margin:0;font-weight:bold; padding-left:7px; }
.aobut .t{ font-size:14px; line-height:1.6;  margin:0 0 6px 120px;}
.aobut .td{ margin:40px 0 12px 90px;}

.wt{ width:100%; border-top:1px solid #DCDFE6}
.f-link{ text-align:center; padding:30px 0 12px; text-align:center; font-size:14px;}
.f-link a{ margin:0 5px;}
.f-btx{ text-align:center; font-size:14px; padding-bottom:30px;}
</style>